<template>
  <div class="neirong">
    <div class="box">
      <h1>会员中心</h1>
      <van-image
        round
        width="80px"
        height="80px"
        :src="$imgHost + userinfo.avatarurl"
      />
      <div class="con">
        <!-- 手机号加密 -->
        <h3>{{ userinfo.phone }}</h3>
        <h3></h3>
        <div class="box2">完善资料让小U更懂你</div>
      </div>
      <div class="fenlei">
        <div v-for="(item, index) in fenlei" :key="index">
          <h3>12</h3>
          <span>{{ item }}</span>
        </div>
      </div>
      <div class="wode">
        <h2>我的订单</h2>
        <div>
          <span>占位</span>
          <span>占位</span>
          <span>占位</span>
          <span>占位</span>
        </div>
      </div>
    </div>
    <div class="bot">
      <div class="bot_list" is="router-link" :to="'/addredd'">
        <div><van-icon name="location-o" />地址管理</div>
        <div class="bot_right">></div>
      </div>
      <div class="bot_list">
        <div><van-icon name="balance-pay" />我的钱包</div>
        <div class="bot_right">剩余200U币></div>
      </div>
      <div class="bot_list">
        <div><van-icon name="qr" />我的二维码</div>
        <div class="bot_right">></div>
      </div>
      <div class="bot_list">
        <div><van-icon name="contact" />我的小伙伴</div>
        <div class="bot_right">></div>
      </div>
      <div class="bot_list" @click="demo">
        <div><van-icon name="bag-o" />0元试用</div>
        <div class="bot_right">></div>
      </div>
      <div class="bot_list" @click="tuichu">
        <div><van-icon name="share-o" />退出登录</div>
        <div class="bot_right">></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from 'vant';
import { getCurUserId, checktoken } from "../../request/api.js";
export default {
  data() {
    return {
      fenlei: ["我的收藏", "浏览记录", "我的红包", "优惠券"],
      userinfo: [],
    };
  },
  mounted() {
    getCurUserId();
    let userinfoObj = localStorage["appUser"]
      ? JSON.parse(localStorage["appUser"])
      : "";
    this.userinfo = userinfoObj;
    // console.log(userinfoObj.phone);
    // console.log(userinfoObj.avatarurl);
    //验证token是否有效
    checktoken()
      .then((d) => {
        if (d.data.code != 200) {
          this.$toast({
            message: d.data.msg,
            icon: "warning-o",
          });
        }
      })
      .catch((e) => {
        console.log(e);
      });
  },
  methods: {
    tuichu() {
      Dialog.confirm({
        title: "",
        message: "确认退出吗？",
      })
        .then(() => {
          Toast.loading({
            duration:1000,
            message: "退出成功...",
            forbidClick: true,
          });
          setTimeout(()=>{
            this.$router.push('/login')
             localStorage.clear();
          },1000)
        })
        .catch(() => {
          // on cancel
        });
    },
    demo() {
      checktoken()
        .then((d) => {
          console.log(d);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style scoped>
.bot a {
  color: black;
}
.van-icon {
  color: #ff6345;
  margin-right: 7px;
}
.bot_list {
  display: flex;
  padding: 10px 0;
}
.bot_list div {
  flex: 1;
}
.bot_right {
  text-align: right;
}
.bot {
  font-size: 18px;
  background-color: white;
  margin-top: 70px;
  padding: 0 20px;
}
.neirong {
  background-color: #f2f2f2;
  height: 90vh;
}
.box {
  width: 100vw;
  height: 36vh;
  background-image: linear-gradient(to bottom, #ff6345, #ff887d);
  position: relative;
}
.box h1 {
  color: white;
  font-size: 16px;
  font-weight: bold;
  line-height: 48px;
  text-align: center;
}
.con {
  height: 50px;
  display: inline-block;
}
.con h3 {
  color: white;
  font-size: 19px;
  line-height: 35px;
}
.box2 {
  text-align: center;
  color: white;
  /* line-height: 20px; */
  font-size: 14px;
  width: 110px;
  border: 1px white solid;
}
.van-image {
  margin: 0 15px;
}
.fenlei {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fenlei div {
  color: white;
  font-size: 14px;
  text-align: center;
  flex: 1;
}
.fenlei div h3 {
  margin-top: 20px;
  margin-bottom: 5px;
}
.wode {
  width: 94vw;
  height: 15vh;
  background-color: white;
  position: absolute;
  left: 11px;
  bottom: -55px;
}
.wode h2 {
  display: inline-block;
  font-weight: bold;
  margin: 10px 0 0 10px;
}
.wode div {
  display: flex;
}
.wode div span {
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  flex: 1;
}
</style>